퍼블리싱/HTML | CSS | Javascript (106) 썸네일형 리스트형 전체동의 체크박스 (회원가입 약관 등에 쓰임) See the Pen checkbox all by publisher.kim (@publisherkim) on CodePen. html 전체동의 회원 이용약관 동의 회원 이용약관 동의2 css /* custom checkbox*/ span.chk {display: block;} .chk input {opacity: 0; position: absolute;} .chk > span {display: inline-block;} .chk > span label {display: inline-block;position: relative;line-height: 1;cursor: pointer; padding-left:1.2em; } .chk .cbx label::before {content: '';position: .. 웹접근성에 맞는 탭메뉴 html 메뉴1 더보기 1리스트 내용 리스트 내용 리스트 내용 리스트 내용 리스트 내용 메뉴2 더보기 2리스트 내용 리스트 내용 리스트 내용 리스트 내용 리스트 내용 메뉴3 더보기 3리스트 내용 리스트 내용 리스트 내용 리스트 내용 리스트 내용 css /* tab */ .tab{width: 100%;} .tab>ul{position: relative;} .tab>ul:after{content:"";display:block;clear:both} .tab>ul>li{float: left;} .tab_cont{position: absolute; width: 100%; top: 0; left: 0;} .tab .tab_menu{position: relative; z-index: 99;} /* 그 외 스타일은 자.. 브라우저 기본 스크롤바 커스텀 css .section::-webkit-scrollbar { /* 스크롤바 전체 width 지정 */ width: 10px; } .section::-webkit-scrollbar-track { /* 스크롤바 트랙 배경색 지정*/ background-color: darkgrey; } .section::-webkit-scrollbar-thumb { /* 실제 스크롤바 디자인 변경 */ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } 스크롤 끝에서 컨텐츠 추가 html .box { width: 500px; height: 500px; border: 1px solid; font-size: 32px; font-weight: bold; } css 1 2 3 4 5 js let count = 5; let $lastBox = document.querySelector(".box:last-child"); const obsever = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting && count < 15) { for (let i = 0; i < 5; i++) { const $newBox = document.createElement("div"); $newB.. 카운팅 스크립트 See the Pen counting script by publisher.kim (@publisherkim) on CodePen. html javascipt * jquery 필요 // counting $(document).ready(function () { $.fn.countTo = function (options) { options = options || {}; return $(this).each(function () { // set options for current element var settings = $.extend({}, $.fn.countTo.defaults, { from: $(this).data('from'), to: $(this).data('to'), speed: $(this).data.. 웹접근성 고려한 html, css 작성방법 웹접근성 고려한 html 0. 크로스브라우징을 고려하여 html, css가 작성되었는가? - 서울시 기준 ie11까지는 고려해야함. ie11, edge, chrome, firefox에서 구동 확인 - W3C 마크업, CSS 검사 서비스 통과 1. 문서 기본 언어가 (html lang="ko") 로 설정 되었는가? 2. 대체 텍스트가 적절히 들어갔는가? - img에 alt 속성이 적절히 들어갔는지? (디자인을 위한 의미없는 img의 경우 alt="" 로 값 비우기) 3. 페이지 이동은 a, 그 외는 button으로 적절히 사용되었는가? - a태그로 페이지 이동이 아닌 이벤트 구현시 onclick="return false;" 등 포커스 이동을 막는것이 쓰였는가? 4. table - scope 속성이 잘 쓰였.. nth-child (n번째 부터 n번째 까지 css적용) /* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */ 선택자:nth-child(7n){ background: red; } /* 22번 부터 이후 모든 box 폰트색 변경 */ 선택자:nth-child(n+22) { color: blue; } /* 1번째 부터 4번째 까지 box 배경색 변경 */ 선택자:nth-child(-n+5) { background: green; } /* 16번째 부터 19번째 까지 box 배경색 변경 */ 선택자:nth-child(n+16):nth-child(-n+19) { background: hotpink; } /* 마지막에서부터 순서를 계산 */ /* 마지막(28)에서 부터 3번째 */ 선택자:nth-last-child(3) { background: gol.. background linear gradient 사용시 border-bottom에 하얀색 라인이 생길때 선형 그라데이션 배경 끝에 CSS 그림자 흰색 선이 생기는 경우 간단한 해결방법. position fixed + background가 linear gradient가 들어간 header의 끝에 자꾸 하얀색 선이 생겨서 짱 스트레스 받았는데 아주아주아주 간단한 해결방법을 찾음. border-bottom : 1px solid rgba(255,255,255,0); 이렇게 투명한 보더 바텀을 주면 끝! https://www.edureka.co/community/179616/css-shadow-white-line-at-the-end-linear-gradient-background vanilla javascript accordion menu See the Pen Untitled by uming (@uming) on CodePen. 모바일 기기 접속시 모바일 페이지로 이동 스크립트 pc 메인 안에 적용. 반응형 subpage aside css 반응형 기준, 각 메뉴에 border 있을 시, on효과 있음. html 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 css ul{padding:1px 0 0 1px; width:95%; background-color:#fff; overflow: hidden; box-sizing: border-box; margin:30px 2.5%} ul li{position:relative; float:left; margin:-1px 0 0 -1px; width:calc(33.333333% + 1px); height:50px; border:1px solid #999; box-sizing:border-box;} ul li a{display: block; width: 100%; height: 100%; text-align:.. scss로 프리픽스 자동으로 붙이는 mixin 지정 // 프리픽스 붙이는 요소에 사용하는 prifix mixin 선언 @mixin prefix($property, $value, $prefixes: ()) { @each $prefix in $prefixes { #{'-' + $prefix + '-' + $property}: $value; } #{$property}: $value; } 사용법 예시 div{ @include prefix(border-radius, 100px, webkit moz ms o) } 속성명 , 속성값, 프리픽스들 순으로 사용하면 된다. 스크롤바 스타일 변경 (ie안됨) ::-webkit-scrollbar { // 스크롤바 width 지정 width: 10px; height: 10px; } ::-webkit-scrollbar-track { // 스크롤바 트랙 스타일 border-radius: 10px; background: rgba(127,127,127,0.7) } ::-webkit-scrollbar-thumb { // 스크롤바 스타일 border-radius: 10px; background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb:hover { // 스크롤바 hover 스타일 background: rgba(0, 0, 0, 0.4); } ::-webkit-scrollbar-thumb:active { // 스크롤바 active.. IOS CSS팁 1. 가로 화면 텍스트 대응 - 모바일에서 화면 가로로 눕힐때 폰트 사이즈 변형 방지 *{-webkit-text-size-adjust:none;} 2. 버튼 기본 모양 reset input {-webkit-appearance: none;-webkit-border-radius: 0;} 3. 숫자에 전화번호 링크 방지 - 번호만 입력해도 전화번호로 인식하고 링크가 걸림 출처 : http://www.happycgi.com/16611 오늘 하루동안 열지않기 레이어 팝업 html 오늘 하루동안 보지 않기 CLOSE css #pop{position:absolute; // 이외에는 자기 마음대로 설정} .close div{float:left; text-align:right;} #check{font-size:12px; font-family:'돋움'; padding-left:10px;} #close{float:right; font-size:13px; padding:5px; font-weight:bold;} #close a {color:#fff;} javascript 1.head 태그 안에서 먼저 cookie 세팅을 해줘야한다. 2. 팝업 소스가 적힌 뒤에 적용되어야 하는 script가 있다. 와 사이에 script 로 넣음. 화면이 로드되었을때 delay 후 스크립트 적용 화면이 로드되었을때 무언가 fade in 된다던지, 효과를 넣을때 간단하게 쓸수있는 함수. $('#section_01').delay(200).queue(function(){ $(this).addClass('active1'); }); 이런식으로 선택자에게 delay함수를 써주고, addClass를 해주면 된다. 이때, 미리 css 에서 section_01이 active1 클래스를 가졌을 때 특정 부분의 opacity가 1이 되도록 하고, section1에는 transition: all 1s ease 0.5s 등으로 애니메이션 효과를 준다. 예시) html 나타나는 부분 css #section1 .content{opacity: 0; transition: all 0.3s;} #section1.active .c.. 화면 크기(width)에 따라 스크립트 적용 pc버전과 모바일 버전에서 적용되어야 하는 script가 다른 경우가 많다. 이럴때 쓸 수 있는 함수. 스크립트 적용시, 하나의 함수를 선언해서 함수 안에서 적용하는게 훨씬 안정적이다. function 함수이름(){ var winWidth = $(window).width(); if (winWidth >= 1024) { //viewport가 1024보다 클때 적용되는 스크립트 } else { //viewport가 1024보다 작을때 적용되는 스크립트 } } //함수지정 함수이름(); // 함수선언 이런식으로 함수 지정 후 선언해주면 끝 ! css 속성 정렬 바꿔주기 나는 원래 CSS를 모든 속성마다 ENTER를 했다. 그래서 CSS 파일이 정말 끝도없이 길어졌다. 1000줄은 기본으로 넘어가곤 했다. 그래도 난 불편한지 몰랐다. 처음부터 그렇게 작성했으므로. 그러다가 우연한 기회에 반드시 css를 인라인으로 써달라는 홈페이지를 코딩하게 됬는데, 세상에! 신세계 아닌가. CSS를 띄어서 쓰면 각 속성 찾기에는 편할지 몰라도 코드 찾는게 좀 어려웠는데 인라인으로 쓰니 속성이 아무리 길어봤자 1-2줄이면 끝나니까 바로바로 찾을수 있어서 너무너무 편했다. 상대적으로 띄어서 쓰는것이 불편하게 느껴졌다. 처음에는 손에 익은 코딩 방법을 바꾸려니 조금 어색했는데, 이제는 잘 적응해서 CSS를 인라인으로 쓰면서 편하게 코딩하고있다. 문제는 내가 이전에 코딩해둔 CSS파일들. 죄다.. CSS 폰트 아이콘 사이트 모음 http://fontawesome.io/icons/ http://cssicon.space/#/ - 여기는 cdn주소를 쓰는 방식이 아니라 아예 소스를 가져다 쓰는형식. http://ionicons.com/ https://material.io/icons/ 가장 잘 쓰는 것은 역시 fontawesome이지. cdn주소만 링크하면 수백개의 아이콘을 손쉽게 사용할수 있다. CSS 폰트로 제작되어서 색상을 바꾸는것이나 크기 조절도 매우 쉽다. [기사] CSS의 7가지 단위 Korean (한국어) translation by June H Yeo (you can also view the original English article) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다. 웹은 항상 성장하고 있고, 새로운 해결법 역시 계속 성장하고 있습니다. 그러므로, 웹 디자이너와 프론트 엔드 개발자로서 우리의 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다. 우리의 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다. 오늘, 저는 이전엔 알지 못했던 몇 가지의 CSS 방법을 알려드리려고 합니다. 몇몇 수치 단위들은 픽셀이나 em과 .. 이전 1 2 3 4 5 6 다음
